<template>
  <div class="boss_user">
    <el-form class="boss-form" inline ref="form" @submit.prevent @keypress.enter="onSearchClick">
      <el-form-item>
        <Button label="新增账号" type="primary" @click="onAddClick" />
      </el-form-item>
      <el-form-item label="账号">
        <el-input class="boss_input" v-model="employeeData.search.employeeName" clearable placeholder="请输入账号名称"></el-input>
      </el-form-item>
      <el-form-item>
        <Button label="搜索" type="primary" @click="onSearchClick" />
      </el-form-item>
    </el-form>

    <div class="outerTable">
      <el-table ref="tableRef" :height="tableHeight" :data="employeeData.list" stripe @filter-change="onFilterChange">
        <el-table-column fixed="left" type="index" label="#" width="50" />
        <el-table-column prop="employeeName" label="账号名称" />
        <el-table-column prop="employeeAccount" label="账号" />
        <el-table-column label="角色">
          <template #default="scope">
            <span v-for="item in scope.row.employeeAuthorityList" :key="item.authorityId" style="padding-right: 7px">{{ item.authorityName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="employeeStatus"
          label="状态"
          width="100"
          :formatter="(row, column, cellValue, index) => $formater.formaterEmployeeStatus(cellValue)"
          column-key="employeeStatus"
          :filter-multiple="false"
          :filters="
            Object.keys(consts.EmployeeStatus).map((key) => {
              return { text: consts.EmployeeStatus[key], value: key }
            })
          "
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" v-loading="loading">
          <template #default="scope">
            <Link label="编辑" @click="onEditClick(scope.row)" :underline="false"/>
            <Link label="禁用" v-if="scope.row.employeeStatus === 'ENABLE'" @click="onChangeStatus(scope.row.employeeId, 'DISABLE')" :underline="false"/>
            <Link label="恢复" v-else @click="onChangeStatus(scope.row.employeeId, 'ENABLE')" :underline="false"/>
          </template>
        </el-table-column>
      </el-table>

      <Pager :page="employeeData.search.page" :pageSizes="employeeData.search.pageSizes" :total="employeeData.total" :limit="employeeData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>

  <Account v-model:visible="accountVisible" @change="accountChange" :form="employeeData.form" />
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import formater from '@/formater'
import md5 from 'js-md5'
import { calcTableHeight } from '@/assets/js/utils.js'
import Pager from '@/components/pager/index.vue'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'
import Account from './components/account.vue'

const { tableRef, tableHeight } = calcTableHeight()

const employeeData = reactive({
  total: 0,
  list: [],
  form: {},
  search: {
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize,
    employeeName: '',
    employeeStatus: ''
  }
})
const accountVisible = ref(false)
const loading = ref(false)

const save = async () => {
  let params = Object.assign({}, employeeData.form)
  params.authorityId = params.authorityIds.join(',')
  delete params.authorityIds
  if (params.password) {
    params.password = md5(employeeData.form.password)
  }
  let url = '/medinstrument/boss/employee/addEmployee'
  if (employeeData.form.employeeId) {
    url = '/medinstrument/boss/employee/updateEmployee'
  }
  let { err } = await api.post(url, params)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const loadData = async () => {
  loading.value = true
  let { data, err } = await api.get('/medinstrument/boss/employee/list', employeeData.search)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    employeeData.list = data.list
    employeeData.total = data.count
  }
}

const onChangeStatus = async (employeeId, status) => {
  let { err } = await api.post(`/medinstrument/boss/employee/updateEmpStatus?empId=${employeeId}&status=${status}`)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const onAddClick = () => {
  employeeData.form = {}
  accountVisible.value = true
}

const onEditClick = (row) => {
  employeeData.form = Object.assign({}, row)
  accountVisible.value = true
}

const accountChange = (val) => {
  employeeData.form = val
  save()
}

const onFilterChange = (filters) => {
  Object.keys(filters).forEach((e) => {
    employeeData.search[e] = filters[e]
  })
  loadData()
}

const onCurrentChange = (val) => {
  employeeData.search.page = val
  loadData()
}

const onSizeChange = (val) => {
  employeeData.search.limit = val
  loadData()
}

const onSearchClick = () => {
  employeeData.search.page = 1
  loadData()
}
onMounted(() => {
  loadData()
})
</script>
